<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东左侧导航栏</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>

        .left-nav{
            width: 190px;
            height: 450px;
            margin: 10px auto;
            font-size: 14px;
            padding: 10px 0;
            border: 1px solid green;
        }

        .left-nav .item{
            line-height: 25px;
            padding-left: 12px;
        }

        .left-nav .item:hover{
            background-color: #d9d9d9;
        }

        .left-nav .item a{
            color: #636363;
        }

        .left-nav .item a:hover{
            color: #c81623;
        }

        .menu_line{
            padding: 0 0px;
        }


    </style>
</head>
<body>
    
    <nav class="left-nav">
        <div class="item">
            <a href="javascript:;">家用电器</a>
        </div>
        <div class="item">
            <a href="javascript:;">手机</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">运营商</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">数码</a>
        </div>
        <div class="item">
            <a href="javascript:;">电脑</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">办公</a>
        </div>
        <div class="item">
            <a href="javascript:;">家居</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">家具</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">家装</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">厨具</a>
        </div>
        <div class="item">
            <a href="javascript:;">男装</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">女装</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">童装</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">内衣</a>
        </div>
        <div class="item">
            <a href="javascript:;">美妆</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">个护清洁</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">宠物</a>
        </div>
        <div class="item">
            <a href="javascript:;">女鞋</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">箱包</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">钟表</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">珠宝</a>
        </div>
        <div class="item">
            <a href="javascript:;">男鞋</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">运动</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">户外</a>
        </div>
        <div class="item">
            <a href="javascript:;">房产</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">汽车</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">汽车用品</a>
        </div>
        <div class="item">
            <a href="javascript:;">母婴</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">玩具乐器</a>
        </div>
        <div class="item">
            <a href="javascript:;">食品</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">酒类</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">生鲜</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">特产</a>
        </div>
        <div class="item">
            <a href="javascript:;">艺术</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">礼品鲜花</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">农资绿植</a>
        </div>
        <div class="item">
            <a href="javascript:;">医药保健</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">计生情趣</a>
        </div>
        <div class="item">
            <a href="javascript:;">图书</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">文娱</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">教育</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">电子书</a>
        </div>
        <div class="item">
            <a href="javascript:;">机票</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">酒店</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">旅游</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">生活</a>
        </div>
        <div class="item">
            <a href="javascript:;">众筹</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">白条</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">保险</a>
        </div>
        <div class="item">
            <a href="javascript:;">安装</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">清洗</a>
            <span class="menu_line">/</span>
            <a href="javascript:;">二手</a>
        </div>
        <div class="item">
            <a href="javascript:;">工业品</a>
        </div>
    </nav>

</body>
</html>